<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-05-20 15:50:40
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-06-01 19:36:02
-->
<template>
  <div class="pieChart clearfloat">
    <div class="mapItem fl">
      <!-- <div>element</div> -->
      <el-progress type="dashboard" :width='100' :percentage="20" color="#5cb87a" title="内容">
      </el-progress>
      <div class="title">待填报</div>
    </div>
    <div class="pieCircle fl">
      <!-- <div>echarts</div> -->
      <div ref="pieCircle" class="pie-circle" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="fr">
      <div ref="profileMap" class="profile-map" :style="{width: '800px', height: '400px'}"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    head() {
      return {
        title: '饼状图'
      }
    },
    mounted() {
      this.initChart()
      this.pieInit()
    },
    methods: {
      pieInit() {
        var that = this
        var chart = this.$echarts.init(this.$refs.profileMap);
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: ' {b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['互联网',
              '金融',
              '政企',
              '传统',
            ]
          },
          series: [
            {
              // name: '一级行业', 
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],

              label: {
                position: 'inner'
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 147, name: '互联网', selected: true },
                { value: 29, name: '金融' },
                { value: 22, name: '政企' },
                { value: 14, name: '传统' },
              ]
            },
            {
              // name: '二级行业', 
              type: 'pie',
              radius: ['40%', '55%'],
              label: {
                formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              },
              data: [
                { value: 147, name: '互联网', selected: true },
                { value: 29, name: '金融' },
                { value: 22, name: '政企' },
                { value: 14, name: '传统' },
              ]
            }
          ]
        };
        chart.setOption(option);
      },
      initChart() {
        var that = this
        var chart = this.$echarts.init(this.$refs.pieCircle);
        // chart.clear();

        var dataItem = {
          name: '装备制造',
          value: 50
        }
        var colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
        var titleItem = {
          text: dataItem.name,
          left: '50%',
          top: '85%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '16',
            color: '#389af4',
            textAlign: 'center',
          },
        }
        var seriesItem = {
          name: dataItem.name,
          type: 'pie',
          clockWise: false,
          radius: [50, 55],
          itemStyle: {
            normal: {
              color: '#389af4',
              shadowColor: '#389af4',
              shadowBlur: 0,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
            }
          },
          hoverAnimation: false,
          center: ['50%', '50%'],
          data: [{
            value: dataItem.value,
            label: {
              normal: {
                formatter: function (params) {
                  return params.value + '%';
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold',
                  color: '#389af4'
                }
              }
            },
          }, {
            value: 100 - dataItem.value,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: '#dfeaff'
              },
              emphasis: {
                color: '#dfeaff'
              }
            }
          }]
        }


        var option = {
          backgroundColor: "#fff",
          title: titleItem,
          series: seriesItem
        }
        chart.setOption(option);
        // 在渲染点击事件之前先清除点击事件
        chart.off('click');
        // 再向外触发点击事件
        chart.on('click', function (params) {
          this.$emit('onPieChartsClick', params)
        });
        // 自适应
        window.onresize = function () {
          chart.resize();
        }
      }
    },
  }
</script>
<style scoped>
  .pieChart {
    width: 1206px;
    height: 100%;
    margin: auto;
    padding-top: 20px;
    /* display: flex;
    justify-self: center; */
  }

  .mapItem {
    width: 100px;
    height: 100px;
    position: relative;
  }

  .title {
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 0;
    /* top: 80px; */
    font-size: 14px;
    color: #606266;
  }

  .pieCircle {
    width: 180px;
    height: 180px;
  }
</style>